<template>
  <div>
    <div class="m-d-charts" id="hotResource" v-loading="loading" v-show="hasData"></div>
    <div class="m-d-charts" style="position: relative" v-show="hasNoData">
      <span class="un-data-th">暂无数据哦～</span>
    </div>
  </div>
</template>

<script>
  import api from '../api/api'
  import echarts from 'echarts/lib/echarts'
  // 引入柱状图
  import 'echarts/lib/chart/bar';
  import 'echarts/lib/chart/line';
  import 'echarts/lib/component/title';
  import 'echarts/lib/component/legend';
  import 'echarts/lib/component/toolbox';
  import 'echarts/lib/component/markPoint';
  import 'echarts/lib/component/tooltip';

  export default {
    name: "resourceEcharts",
    props: ['keywordId', 'timeRange'],
    data() {
      return {
        loading: true,
        fromDateString: '',
        toDateString: '',
        resourceName: [],
        resourceNum: [],
        hasData: true,
        hasNoData: false
      }
    },
    mounted() {
      this.hotResource = echarts.init(document.getElementById('hotResource'));
      this.getData();
      this.resize();
    },
    methods: {
      resize() {
        // echarts自适应页面
        const self = this;
        setTimeout(() => {
          window.onresize = function () {
            self.hotResource.resize()
          }
        }, 20)
      },
      getData() {
        api.HotResource({keywordId: this.keywordId, fromDateString: this.fromDateString, toDateString: this.toDateString})
          .then(res => {
            this.loading = false;
            if(res.list[0].count == 0){
              this.hasData = false;
              this.hasNoData = true;
              return false
            }
            this.resourceName = [];
            this.resourceNum = [];
            for (let i = 0; i < res.list.length; i++) {
              this.resourceName.push(res.list[i].sourceFrom);
              this.resourceNum.push(res.list[i].count)
            }
            this.initData();
          }).catch(e => {
          console.log(e);
        });
      },
      initData() {
        const option = {
          color:['#3f7bff', '#53bef4', '#72e4e4', '#7255c1', '#e2af08', '#d56a35'],
          toolbox: {
            show: true,
            itemSize: 25,
            right: 20,
            feature: {
              dataZoom: {show: false},
              dataView: {show: false},
              magicType: {show: false},
              restore: {show: false},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.resourceName,
              axisLine: {
                lineStyle: {
                  color: '#EFF3F5'
                }
              },
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                /*rotate: 45,*/
                fontWeight:'bold',
                fontSize: 24,
                color: '#333'
              },
              z: 10
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#EFF3F5'
                }
              },
              axisLabel: {
                fontWeight:'bold',
                fontSize: 24,
                color: '#333'
              },
              splitLine: {
                lineStyle: {
                  color: '#EFF3F5'
                }
              }
            }

          ],
          series: [
            {
              name: '热度',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: function (param) {
                    const colorList =['#3f7bff', '#53bef4', '#72e4e4', '#7255c1', '#e2af08', '#d56a35'];
                    return colorList [param.dataIndex]
                  },
                  label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      color: '#615a5a',
                      fontWeight:'bold',
                      fontSize: 24,
                    }
                  }
                }
              },
              data: this.resourceNum
            }
          ]
        };
        this.hotResource.setOption(option);
      }
    },
    watch: {
      keywordId() {
        this.hotResource.clear();
        this.hasData = true;
        this.hasNoData = false;
        this.loading = true;
        this.getData()
      },
      timeRange() {
        if(this.timeRange == null){
          this.fromDateString = '';
          this.toDateString = ''
        }else{
          this.fromDateString = this.timeRange[0];
          this.toDateString = this.timeRange[1];
        }
        this.hotResource.clear();
        this.hasData = true;
        this.hasNoData = false;
        this.loading = true;
        this.getData()
      }
    }
  }
</script>

<style scoped>

</style>
